<template>
	<view>
		<view  v-if="searchLineList.length" style="min-height:320px">
			<view class="list-title"><text>推荐线路</text> </view>
          	<view class="list-main"  v-for="(item,index) in searchLineList" :key="index" @click.stop="goRegulatList(item.lineId)">
          		<!-- <view class="item-block " style="margin-bottom: 10px;">
          			<view class="display-flex display-flex-align-center" style="font-size: 14px;height: 28px;padding: 0 6px;">
          				<view class="font-weight-bold" style="margin-right: 6px;">{{item.line_sn}}</view>
          				<view class="line-ellipsis font-weight-bold" style="max-width: 120px;">{{item.origin}}</view>
          				<view><image src="../../static/images/bus/arrow_grey.png" style="width:14px;height: 6px;padding: 0 6px"></image></view>
          				<view class="line-ellipsis font-weight-bold" style="max-width: 120px;">{{item.destination}}</view>		
          			</view>
          			<view class="base-info" style="margin: 10px;">
          				<view class="display-flex display-flex-column">
          					<view class="time-text display-flex" style="margin-bottom: 5px;">
          						<text style="color: #9a9a9a;margin-right: 10upx;">班次:</text>
          						<scroll-view scroll-x="true" style="width:500rpx;white-space: nowrap;">
          							<view class="grey-button" v-for="(item1,index1) in item.regulars" :key="index1">{{item1}}</view>
          						</scroll-view>
          					</view>
          					<view class="company display-flex" style="font-size: 10px;">
          						<text style="color: #9a9a9a;margin-right: 10upx;">运输公司:</text>
          						<view style="color: #9a9a9a;">{{item.short_name}}</view>
          					</view>
          				</view>
          			</view>
          			<view class="line"></view>
          			<view class="bot-item" style="margin: 8px 0">
          				<u-row gutter="16" justify="center" >
          					<u-col span="9">
          						<view class="price" @click="goLineDetail(item.line_id)"><text>￥{{item.discount_price?item.discount_price:item.price}}</text>
          						  <text style="font-size: 20rpx;margin-left:10rpx">起</text>
          						</view>
          	
          					</u-col>
          					<u-col span="3">
          	                   <view class="ticket-item" style="margin-bottom: 10px;">
          							<view class="buy-ticket-button" >
          								￥{{item.discount_price?item.discount_price:item.price}}起购
          							</view>
          						</view>									
          				</u-col>
          				</u-row>
          			</view>
          		</view> -->
          	
          	    <view class="display-flex-column">
          			<view class="line-sn">
          				{{item.lineSn}}
          			</view>
          			<view class="row" style="margin-bottom: 15px;">
          				<view class="display-flex-column">
          					<view class="row-center">
          						<view class="station_dot station_dot_start">
          						</view>
          						<view class="od-item">
          							{{item.origin}}
          						</view>
          					</view>
          					
          					<view class="shu-line" style="margin: 0 18px;">
          						
          					</view>
          					
          					<view class="row-center">
          						<view class="station_dot station_dot_end">
          						</view>
          						<view class="od-item">
          							{{item.destination}}
          						</view>
          					</view>
          				</view>
          				<view class="ticket-item">
          					<view class="buy-ticket-button">
          						￥{{item.discountPrice?item.discountPrice:item.price}}起购
          					</view>
          				</view>
          			</view>
          			<view class="line">
          				
          			</view>
          		</view>
          	</view>
		</view>  
		<view  v-else  >
			<emptyPage :title="loading?'正在搜索中':'暂无匹配路线'" ></emptyPage>
			<view @click="goHome" style="text-align: center;margin-top: 10px;">
				<view class="bule-button2">
					重新搜索
				</view>
			</view>
		</view>
	</view>	
</template>

<script>
	import Cache from '../../../utils/cache';
	import { CITY_INFO} from '../../../config/cache.js'
	 var util = require('@/common/js/util.js');
	 var _getDiffDate = util.getDiffDate;
	 var _addDay = util.addDay;
	 var _dateDiff = util.dateDiff;
	 var _parseDate = util.parseDate;
	 var _formatDate = util.formatDate
	 import { searchLineFt } from '@/api/bus.js'
	 import emptyPage from '@/components/emptyPage.vue'
	export default {
		components: {emptyPage},
		data() {
			return {
				keyword:'',
				resultList:[],
				type: 1,
				searchFrom:{},
				searchLineList: [],
				loading: true,
			}
		},
		onLoad(option) {
			var city = Cache.has(CITY_INFO)? JSON.parse(Cache.get(CITY_INFO)) : ""
			this.searchFrom = {
				city_id: city.id,
				from_lng:　option.from_lng,
				from_lat:　option.from_lat,
				to_lng:　option.to_lng,
				to_lat:　option.to_lat
			}
		},
		onReady() {
			this.initSearch(this.searchFrom)
			
		},
		methods:{
			initSearch(data){
				uni.showLoading({
					title:'正在搜索中...'
				})
				this.loading = true
				searchLineFt(data).then(res => {
					this.loading = false
					uni.hideLoading()
					
					this.searchLineList = res.data			
			    }).catch(err =>{
					this.loading = false
					uni.hideLoading()
					
				})
			},
			goHome(){
				uni.redirectTo({
					url:'/pages/bus/index/index'
				})
				// uni.navigateTo({
				// 	url:'/pages/scenic/trip_list'
				// })
			},
			goRegulatList:function(line_id){
				var date =  _formatDate("yyyy-MM-dd")
				// uni.navigateTo({
				// 	url:'/pages/bus/regular_list/index?line_id='+line_id+'&date='+date
				// })
				uni.navigateTo({
					url:'/pages/bus/line_info/index?line_id='+line_id
				})
				
			},
			goDz(){
				uni.navigateTo({
					url:"/pages/bus/ogz_line/index"
				})
			},
			goAllLine(){
				uni.navigateTo({
					url:"/pages/bus/all_line/index"
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.list-title{
		margin: 24upx 24upx;
		color: #007aff;
		font-weight: 700;
	}
	.list-main{
		position: relative;
		margin: 24upx 24upx;
		background-color: #fff;
	}
	.line-sn {
		font-size: 15px;
		font-weight: 600;
		color: #000000;
		margin: 8px 10px;
	}
	.od-item{
		color: #888;
		font-size: 12px;
	}
	
	.ticket-item {
		margin-left: auto;
		margin-right: 20px;
	}
	.item-block{
		position: relative;
		padding: 24upx 20upx 24upx 20upx;
		border-radius: 10upx;
		box-shadow: 0 3px 10px 0 rgba(0,0,0,.08);
	}
	.base-info{
		margin:15upx 0;
		padding: 0 6px
	}
	.price{
		font-size: 40upx;
		font-weight: 500;
		color: #333;
	}
    .bot-item{
	  padding: 14upx 0upx 0 0;
	}
	.bule-cle{
		width: 116upx;
		border-radius: 5px;
		border: 1px solid #26a2ff;
		display: flex;
		-webkit-box-align: center;
		align-items: center;
		-webkit-box-pack: center;
		justify-content: center;
		padding: 10upx;
		margin-left: 24upx;
	}
	.time-text {
		color: #333;
		font-size: 24upx;
		margin-bottom: 24upx;
	}
	
	.search-empty{
		position: absolute;
		top: 200px;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

</style>